你可能遇到過這樣的情況：影片正在播放，你打開另一個分頁查資料，聲音突然停了；切回影片頁面，播放又恢復了。 有時甚至不用切換分頁，只要點擊其他視窗，或者把瀏覽器最...
一、今天的學習目標將add的功能從index.js裡面拉出來，並創一個獨立的檔案放add.js處理 /add 指令，這種把不同功能拆分到不同檔案中管理的方式，通...
隨著專案功能越來越多，如果所有的程式碼全都擠在同一個檔案裡，不僅程式碼會變得超長，維護起來也十分頭痛。因此，今天的核心任務有兩個： 模組化大掃除：把原本單一檔...
一、今天的學習目標延續昨天取得 /add 指令中 title、date、time 三個輸入值的功能，今天開始處理使用者輸入的日期與時間的格式是否有符合要求。我希...
一、今天的學習目標今天主要是修改index.js這份檔案。昨天我已經完成 /add 指令的輸入介面，讓使用者可以在 Discord 中輸入三個資料： titl...
在前面幾天，我們完成了新增、刪除、localStorage 資料持久化，以及精美的分類色彩標籤。不過，畫面最上方的總覽看板（今日支出、本月已花費）一直都還是寫死...
今日學習目標 在前幾天，我們雖然讓網頁學會了新增與刪除，但最大的痛點就是，只要一按重新整理，之前的記帳就全部蒸發了T^T。今天我們會將資料持久化 (localS...
摘要 Uint8Array 這類 TypedArray 名字裡有 Array，卻不是一般 Array；它不是自己保存一串數字，而是用某種數值型別「觀看」一段 A...
在前面幾天完成新增支出的功能後，我們的網頁還欠缺兩大功能：1. 刪除：手殘打錯金額時，能隨時把錯誤資料清除。2. 分類色彩標籤：讓不同的消費類別擁有專屬的顏色，...
摘要 深拷貝不只是一層層往下複製。structuredClone() 先把資料序列化成一份記錄，再重建出全新的資料；它保留 Date、Map 等型別與資料內部的...
相信大家對於這樣的圖片輪播（Carousel）效果一定不陌生，幾乎在各大網站的首頁都能看到。 像這樣 「每隔固定時間自動切換下一張照片」 或是 「定時重複執行...
摘要 ES2023 的 toSorted()、toReversed()、toSpliced()、with() 讓常見 Array 操作能回傳新 Array，避免...
在處理資料時，經常會遇到帶有小數點的數字，例如： 計算購物車折扣後，價格出現了小數點（例如：$199.8）。 製作隨機抽獎時，算出了一個隨機小數。...
前言：覆蓋率報告顯示 100%，這不是應該最安心的狀態嗎？ 「這個模組的覆蓋率報告顯示 100%，代表每一行、每一個分支都被測試跑過，重構起來應該很放心吧？」...
摘要 為什麼內容一樣的物件，放進 Set 卻不會被去重？先弄懂 Set 判斷「一樣」的規則，再用 ES2025 的集合運算，一行比出交集資料間少了什麼、篩選條件...
今日學習目標 • 實作動態修改金庫名稱的互動功能（讓使用者自訂專屬名稱）• 抓取右側快速記帳表單的 DOM 元素• 「新增支出」按鈕的點擊事件• 實現不用重...
先來看看兔猻的照片，雖然廣義上牠是貓科動物，但狹義來說牠跟家貓是不同屬的（家貓是 Felis（貓屬）；兔猻則是 Otocolobus（兔猻屬 ）。 (圖片來源...
當我們選取「多個」元素時（例如用 querySelectorAll 或 getElementsByTagName），JavaScript 回傳給我們的並不是真正...
在 介紹DOM是什麼 時，提到如果把整個網頁比喻成一隻貓，DOM 就是貓身上的各個部位與神經反射。 既然現在我們已經有了貓了！接下來——當然就是選擇部位要來擼貓...
為什麼需要字串補零？ 在開發網頁時，我們經常會遇到需要格式化文字的情境： 製作計時器或電子鐘時，希望把 9 秒顯示成 09 秒。 顯示訂單編號時，希望將...
摘要 介紹 ES2024 Object.groupBy() 如何將 iterable 分組成前端可用的結構，並釐清它與 Map.groupBy() 的 key...
在前兩天，我們確立了「大學生記帳與消費分析網站」的完整藍圖，也把開發環境跟專案根目錄都安頓好了。不過老實說，打開昨天的畫面，真的看起來也太廢廢了吧，所以我們今天...
一、今天的學習目標 今天的目標是加入三、建立 /add 指令新的slash command:/add 並加入 title、date、time 三個輸入欄位 將...
昨天我們確認了「大學生記帳與消費分析網站」的完整構想與基本的技術藍圖。今天的核心任務是把開發環境架設好，並建立專案的第一個網頁骨架。 今天下載了什麼？ V...
摘要： 從 key、相等判斷與迭代順序切入，建立 Object、Map、Set 三種資料模型的選擇準則。 前置知識：會使用 Object、Array 與基本...
如果網頁是一隻貓🐱 如果把整個網頁比喻成一隻貓，DOM 就是貓身上的各個部位與神經反射。可以透過與特定部位互動，觸發不同的反應： 拍拍貓屁股：觸發「發出呼嚕...
用純 JS 刻出童年回憶！工程師打造「火柴人奧義對決」網頁版你還記得小時候在學校電腦課，偷偷在畫面上畫火柴人決鬥的感動嗎？近日，一位熱血的前端工程師將這份童年情...
摘要： 用「工作何時開始、結果如何交付、錯誤往哪裡走、誰能停止工作」四個問題，分清 Promise 的一次 settlement、Async Iterator...
前言：測試綠燈、CI 綠燈，為什麼上線還是炸了？ 「這支測試把外部依賴都 mock 掉了，應該很單純、很穩定吧？」 昨天談到 AI 傾向把待測物件依賴的每一個東...
前言 終於來到系列文的最後一天。這篇文章想做兩件事：第一，帶大家實際鑽進 oven-sh/bun 的原始碼庫，看看這個「號稱最快的 JavaScript 執行...
Rafael
recca0120
蘋果章魚MichaelHo1203
iThome鐵人賽
看影片追技術